<template>
	<view class="list-page">
		<Navbar title="我的反馈" />
		<view class="pagebox">
			<view class="listbox">
				<u-list :enable-flex="true" height="100%" @scrolltolower="handlreToLower()">
					<u-list-item v-for="item in list" :key="item.id">
						<view class="list-item" @click="handleClick(item)">
							<view class="item-title">
								<span><span>反馈类型:</span> {{item.title}}</span>
								<span style="font-size: 12px;">{{ptime(item.createDate)}}</span>
							</view>
							<view class="item-ctx">
								<span>反馈内容:</span> {{decodeCtx(item.content)}}
							</view>
							<u-badge :isDot="true" :offset="['80%','5px']" :absolute="true" type="warning" :show="item.status==2"></u-badge>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<image src="../../static/nimg/bg.png" class="page_bg_img" mode=""></image>
		<u-modal :show="showModal" title="反馈回复" @close="oncloseModal()" content="" :showConfirmButton="false" :closeOnClickOverlay="true">
			<template #default>
				<view style="width: 100%;">
					<view style="font-size: 13px;">
						{{ptime(modal.time)}}
					</view>
					<view style="margin-top: 10rpx;">
						{{modal.ctx || "asdf"}}
					</view>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request.js'
	import {
		parseTime
	} from '@/utils/index.js'
	import Navbar from '@/components/navbar.vue'
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				list: [],
				total: 0,
				page: 1,
				limit: 10,
				modal:{
					time:'',
					ctx:''
				},
				showModal:false
			}
		},
		onLoad() {
			this.showModal = false
			this.page = 1
			this.list = []
			this.fetchData()
			// for (var i = 0; i < 10; i++) {
			// 	this.list.push({id:i,title:"",content:"",dot:i%2==0?true:false})
			// }
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.fetchData()
		},
		methods: {
			ptime(value) {
				if (value) {
					return parseTime(value, '{y}-{m}-{d} {h}:{i}:{s}')
				}
			},
			handlreToLower() {
				console.log(1111);
				this.page++
				this.fetchData()
			},
			decodeCtx(val) {
				return decodeURIComponent(val)
			},
			handleClick(item){
				if(item.status==1){
					return
				}
				this.showModal = true
				this.modal.ctx = item.replyContent || '暂无回复'
				this.modal.time = item.replyDate || this.ptime(new Date())
			},
			oncloseModal(){
				this.showModal = false
			},
			fetchData() {
				request.get('/suggest/listMy', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code === 200 && res.result) {
						uni.stopPullDownRefresh()
						if (res.result.dataList && res.result.dataList.length == 0) {
							uni.showToast({
								title: '没有更多反馈了',
								icon: 'none'
							})
							return
						}
						if (this.list.length != 0) {
							this.list = this.list.concat(res.result.dataList)
						} else {
							this.list = res.result.dataList
						}
						this.total = res.result.count
					}
				})
			}
		}
	}
</script>

<style>
	.list-page {
		/* padding: 20rpx; */
		/* height: calc(100% - 100rpx); */
		height: 100%;
		overflow: hidden;
	}
	.pagebox{
		height: 100%;
		top: 180rpx;
	}
	.page_bg_img{
		top: 0;
	}
	.listbox {
		height: 100%;
		overflow: hidden;
	}

	.list-item {
		/* border: 1px solid rgba(0, 0, 0, 0.1); */
		border-radius: 20rpx;
		background-color:#C4E6C2;
		margin-top: 16rpx;
		padding: 20rpx;
		color: #074F1E;
		display: flex;
		flex-direction: column;
		row-gap: 20rpx;
		position: relative;
	}

	.item-title {
		display: flex;
		justify-content: space-between;
		font-weight: 600;
	}

	.item-ctx {
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>